<template>
  <view class="container">


    <view class="logout-info" v-if="detail.fZxbs === '1'">
      <view class="address-name">{{ detail.fJlxxqmcName }}</view>
      <view class="collected-person"> {{ detail.infoNames }}</view>
      <image class="house-icon" :src="baseImgUrl + 'logout-icon.png'"></image>
    </view>

    <view class="person-info" v-else>
      <view class="address-name">{{ detail.fJlxxqmcName }}</view>
      <view class="collected-person"> {{ detail.infoNames }}</view>
      <image class="house-icon" :src="baseImgUrl + 'shiyoufangwu3.png'"></image>
    </view>

    <view class="common-card">
      <image :src="detail.fFaceUrl ? `${imgPrefix}${detail.fFaceUrl}` : `${baseImgUrl}queryFace-01.png`"
        @click="pvwImage([detail.fFaceUrl ? `${imgPrefix}${detail.fFaceUrl}` : `${baseImgUrl}queryFace-01.png`])">
      </image>
      <view class="person-title">身份信息</view>
      <view class="person-section-item">
        <view class="person-section-title">姓 名</view>:
        <view class="person-section-content">{{ detail.fXm }}</view>
      </view>

      <view class="person-section-item">
        <view class="person-section-title">性 别</view>:
        <view class="person-section-content">{{ detail.fXbdm }}</view>
      </view>

      <view class="person-section-item">
        <view class="person-section-title">民 族</view>:
        <view class="person-section-content">{{ detail.fMzdmName }}</view>
      </view>

      <view class="person-section-item">
        <view class="person-section-title">年 龄</view>:
        <view class="person-section-content">{{ detail.getAge }}</view>
      </view>

      <view class="person-section-item">
        <view class="person-section-title">联系电话</view>:
        <view class="person-section-content">{{ detail.fLxdh ? detail.fLxdh : '暂未添加' }}</view>
      </view>

      <view class="person-section-item">
        <view class="person-section-title">身份证号</view>:
        <view class="person-section-content">{{ encryptIDCard(detail.fGmsfhm) }}</view>
      </view>

      <!-- <view class="person-section-item">
        <view class="person-section-title">户籍地址</view>:
        <view class="person-section-content">{{ detail.fHjdzQhnxxdz }}</view>
      </view>
      <view class="person-section-item">
        <view class="person-section-title" style="width: auto;">户籍地所属区县</view>:
        <view class="person-section-content">{{ detail.fHjdzSsxqdmName }}</view>
      </view> -->
    </view>

    <view class="common-card">
      <view class="person-title">居住信息</view>
      <!--      <view class="person-section-item">
        <view class="person-section-title">人户情况</view>:
        <view class="person-section-content">{{ detail.fRylxName }}</view>
      </view>
      <view class="person-section-item">
        <view class="person-section-title">人口类型</view>:
        <view class="person-section-content">{{ detail.fRylxTypeName }}</view>
      </view>
      <view class="person-section-item">
        <view class="person-section-title">是否落户</view>:
        <view class="person-section-content">{{ detail.fIsSettleName }}</view>
      </view> -->
      <view class="person-section-item">
        <view class="person-section-title" style="width: 140rpx">与房主关系</view>:
        <view class="person-section-content">{{ detail.fTgryfzgxName }}</view>
      </view>
      <!--  <view class="person-section-item">
        <view class="person-section-title">现居地址</view>:
        <view class="person-section-content">{{ detail.fXjzdz  || '暂未添加' }}</view>
      </view> -->
    </view>

    <view class="common-card last-card">
      <view class="person-title">采集人员</view>
      <view class="person-section-item">
        <view class="person-section-title">人员姓名</view>:
        <view class="person-section-content">{{ detail.fCjrxm }}</view>
      </view>
      <view class="person-section-item">
        <view class="person-section-title">人员类型</view>:
        <view class="person-section-content">{{detail.fCjrxmType}}</view>
      </view>
      <view class="person-section-item">
        <view class="person-section-title">采集时间</view>:
        <view class="person-section-content">{{
          moment(detail.fCjsj).format("YYYY/MM/DD HH:mm")
        }}</view>
      </view>
    </view>

    <view class="button-wrapper" v-if="options.isMain == '1' || ['fj', 'wgy'].includes(role)">
      <view class="btn-l" :data-url="`/actual_person/actual_person_add?type=edit&addressInfo=${encodeURIComponent(JSON.stringify(
          {
            ...addressInfo,
            bName,
            roomName
          }
        ))}&fId=${fId}`" @click="handleClickRouter">
        <!-- <image src="" class="btn-icon"></image> -->
        <u-icon name="edit-pen" class="btn-icon" width="33" height="33"></u-icon>
        <view class="btn-text">编辑人员信息</view>
      </view>
      <view class="btn-r" @click="handleClickDelete">
        <!-- <image src="" class="btn-icon"></image> -->
        <u-icon name="minus-circle" class="btn-icon" width="33" height="33"></u-icon>
        <view class="btn-text">移除当前人员</view>
      </view>
    </view>
    <yy-watermark></yy-watermark>
  </view>
</template>

<script>
  import {
    handleClickRouter,
    pvwImage,
    encryptIDCard
  } from "@/utils/util.js";
  import {
    getAction,
    postAction
  } from "@/utils/request.js";
  import {
    Toast,
    navBack
  } from "@/utils/util.js";
  import moment from "@/utils/moment.js";
  export default {
    data() {
      return {
        fId: "",
        detail: {},
        baseImgUrl: this.$baseImgUrl,
        imgPrefix: uni.getStorageSync("imgPrefix"),
        addressInfo: {},
        roomName: '',
        bName: '',
        options: {},
        role: uni.getStorageSync('role')
      };
    },
    onLoad(options) {
      this.options = options;
      this.fId = options.fId;
      this.roomName = options.roomName;
      this.bName = options.bName;
      this.getList();
    },
    onShow() {
      // uni.$on("person_refresh", (e) => {
      this.getList();
      // });
    },
    methods: {
      encryptIDCard,
      moment,
      handleClickRouter,
      pvwImage,
      async getList() {
        const {
          result
        } = await getAction(`/indeed/population/getIdPersonInfo`, {
          fId: this.fId,
        });
        this.detail = result;
        this.setAddressInfo(result)
      },
      setAddressInfo(data) {
        this.addressInfo.fSsjlxxqDzbm = data.fSsjlxxqDzbm;
        this.addressInfo.fSsjzwdyfwDzbm = data.fSsjzwdyfwDzbm;
        this.addressInfo.fSsdyDzbm = data.fSsdyDzbm;
        this.addressInfo.fSslcDzbm = data.fSslcDzbm;
        this.addressInfo.fSsjzwDzbm = data.fSsjzwDzbm;
      },
      handleClickDelete() {
        uni.showModal({
          title: "提示",
          content: "请确认是否移除当前人员？",
          confirmColor: "#2488F5",
          success: async (res) => {
            if (res.confirm) {
              const res = await postAction(
                `/indeed/population/deletePersonInfo`, {
                  fId: this.fId,
                }
              );
              if (res.code == 200) {
                Toast('移除成功！', 'success');
                navBack();
              } else {
                uni.showModal({
                  title: '提示', //标题
                  content: res.message, //提示内容
                  showCancel: false //不显示取消按钮
                })
              }
            }
          },
        });
      },
    },
    destroy() {
      uni.$off("person_refresh");
    },
  };
</script>

<style scoped lang="scss">
  .container {
    padding: 16rpx 16rpx 0 16rpx;
    background: #f9f9f9;

    .person-info {
      width: 718rpx;
      height: 216rpx;
      background: linear-gradient(89deg, #51b1ff 0%, #1790f2 100%);
      border-radius: 8rpx;
      padding: 36rpx 46rpx;
      position: relative;
      font-family: PingFang SC, PingFang SC;

      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .address-name {
        font-weight: bold;
        font-size: 36rpx;
        color: #fafafa;
        z-index: 1;
      }

      .house-icon {
        position: absolute;
        width: 150rpx;
        height: 140rpx;
        top: 42rpx;
        right: 40rpx;
        z-index: 0;
      }

      .collected-person {
        font-weight: 500;
        font-size: 28rpx;
        color: #fafafa;
      }
    }

    .logout-info {
      width: 718rpx;
      height: 216rpx;
      background: #FBE6E5;
      border-radius: 8rpx;
      padding: 36rpx 46rpx;
      position: relative;
      font-family: PingFang SC, PingFang SC;

      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .address-name {
        font-weight: bold;
        font-size: 36rpx;
        color: #E43D33;
        z-index: 1;
      }

      .house-icon {
        position: absolute;
        width: 110rpx;
        height: 93rpx;
        top: 54rpx;
        right: 36rpx;
        z-index: 0;
      }

      .collected-person {
        font-weight: 500;
        font-size: 28rpx;
        color: #E43D33;
      }
    }

    .common-card {
      position: relative;
      margin-top: 16rpx;
      padding: 30rpx 46rpx;
      background: #fff;
      border-radius: 8rpx;
      display: flex;
      flex-direction: column;

      .person-title {
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 36rpx;
        color: #333333;
      }

      .person-section-item {
        display: flex;
        font-weight: 500;
        font-size: 28rpx;
        color: #aaaaaa;
        margin-top: 20rpx;

        &:nth-of-type(1) {
          margin-top: 30rpx;
        }

        .person-section-title {
          width: 120rpx;
          text-align: justify;
          text-align-last: justify;
        }

        .person-section-content {
          flex: 1;
          font-weight: 500;
          font-size: 28rpx;
          color: #333333;
          margin-left: 16rpx;
        }
      }

      image {
        position: absolute;
        top: 98rpx;
        right: 26rpx;
        width: 161rpx;
        height: 171rpx;
        border-radius: 8rpx;
      }
    }

    .last-card {
      margin-bottom: 140rpx;
    }

    .button-wrapper {
      height: 120rpx;
      background: #ffffff;
      border-radius: 0rpx 0rpx 0rpx 0rpx;
      display: flex;
      position: fixed;
      bottom: 0;
      left: 0;
      align-items: center;
      justify-content: center;
      width: 100%;

      .btn-icon {
        width: 33rpx;
        height: 33rpx;
        margin-right: 10rpx;
      }

      .btn-text {
        line-height: 1;
        margin-left: 10rpx;
      }

      .btn-l,
      .btn-r {
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 26rpx;
        color: #000000;
        height: 100%;
      }
    }
  }
</style>